<template>
  <!--
    搜索条件组件
    适用范围：下拉框的数据是静态数据，ui布局为第一行为搜索项（包含搜索、新增、导出项），第二行为批量操作项，建议放入一些批量操作（目前只有批量删除操作）
  -->
  <div v-if="isReady" class="yitu-search-condition">
    <el-row>
      <el-col v-for="(item, index) in conditionList" :key="index" :xs="24" :md="5">
        <div v-if="['select', 'multiSelect'].indexOf(item.type) > -1">
          <label v-if="showLabel" :style="{width: `${labelWidth}px`, 'text-align': `${labelPosition}`}" class="label">{{ item.label }}</label>
          <el-select
            v-model="searchObj[item.value]"
            :placeholder="!item.placeholder && showLabel ? '请选择' : item.placeholder"
            clearable
            :filterable="item.filterable"
            :size="size|| 'medium'"
            :multiple="item.type === 'multiSelect'"
            @change="(val) => {$emit('searchChange', val, item.value, searchObj)}"
          >
            <el-option v-for="(itemChildren, index1) in item.options" :key="index + '-' + index1" :label="itemChildren.label" :value="itemChildren.value" />
          </el-select>
        </div>
        <div v-else-if="item.type === 'input'">
          <label v-if="showLabel" :style="{width: `${labelWidth}px`, 'text-align': `${labelPosition}`}" class="label">{{ item.label }}</label>
          <el-input
            v-model="searchObj[item.value]"
            :placeholder="!item.placeholder && showLabel ? '请输入' : item.placeholder"
            clearable
            :size="size|| 'medium'"
            @change="(val) => {$emit('searchChange', val, item.value, searchObj)}"
          />
        </div>
        <div v-else-if="['date', 'month', 'daterange', 'datetime', 'datetimerange'].indexOf(item.type) > -1">
          <label v-if="showLabel" :style="{width: `${labelWidth}px`, 'text-align': `${labelPosition}`}" class="label">{{ item.label }}</label>
          <el-date-picker
            v-if="['date', 'month'].indexOf(item.type) > -1"
            v-model="searchObj[item.value]"
            :type="item.type"
            :size="size|| 'medium'"
            :placeholder="!item.placeholder && showLabel ? '请填写日期' : item.placeholder"
            :format="item.format || 'yyyy-MM-dd'"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
            @change="val => {$emit('searchChange', val, item.value, searchObj)}"
          />
          <el-date-picker
            v-else-if="['daterange', 'datetimerange'].indexOf(item.type) > -1"
            v-model="searchObj[item.value]"
            :type="item.type"
            :size="size|| 'medium'"
            :start-placeholder="item.startPlaceholder || '开始日期'"
            :range-separator="item.rangeSeparator || '至'"
            :end-placeholder="item.endPlaceholder || '结束日期'"
            :format="item.format || item.type === 'daterange' ? 'yyyy-MM-dd' : 'yyyy-MM-dd hh:mm:ss'"
            :value-format="item.valueFormat || item.type === 'daterange' ? 'yyyy-MM-dd' : 'yyyy-MM-dd hh:mm:ss'"
            @change="val => {$emit('searchChange', val, item.value, searchObj)}"
          />
        </div>
        <div v-else-if="['time', 'timerange'].indexOf(item.type) > -1">
          <label v-if="showLabel" :style="{width: `${labelWidth}px`, 'text-align': `${labelPosition}`}" class="label">{{ item.label }}</label>
          <el-time-picker
            v-model="searchObj[item.value]"
            :placeholder="!item.placeholder && showLabel ? '请选择时间' : item.placeholder"
            :is-range="item.type === 'timerange'"
            :size="size|| 'medium'"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="val => {$emit('searchChange', val, item.value, searchObj)}"
          />
        </div>
      </el-col>
      <el-col :xs="24" :md="5">
        <el-button :size="size || 'small'" class="yt-search-btn ml20" type="primary" @click="searchData()">
          {{ searchBtnTxt }}
        </el-button>
        <el-button v-if="hasExportBtn" :size="size || 'small'" icon="el-icon-download" type="success" plain :loading="loading" @click="$emit('exportExcel')">
          导出
        </el-button>
        <el-button :size="size || 'small'" class="reset-btn" @click="resetMethod()">
          重置
        </el-button>
        <slot name="firstRow" />
      </el-col>

    </el-row>
    <el-row v-if="hasBatch">
      <el-button v-if="hasAddBtn" :size="size || 'small'" class="add-btn" type="primary" icon="el-icon-plus" @click="$emit('addBtnMethod')">
        {{ addBtnTxt }}
      </el-button>
      <el-button v-if="hasBatchDeleteBtn" :size="size || 'small'" type="danger" icon="el-icon-delete" class="delete-btn" plain @click="$emit('batchDelete')">
        删除
      </el-button>
      <slot name="otherBtn" />
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'YituSearchCondition',
  props: {
    conditionList: {
      type: Array,
      required: true,
      default: () => [] /** 例如[{label: '姓名', value: 'name', defaultValue: null, type: 'input', options: []}]，其中
      label 搜索标签
      value 搜索字段
      defaultValue 搜索默认值
      type 控件类型，如input-文本框、select-下拉框、multiSelect-下拉多选框、date，month-日期选择框、datetime-日期时间控件、time-时间控件、daterange-日期选择范围控件、datetimerange-日期时间范围控件、timerange-时间范围控件
      options 选项列表，适用于下拉框
      placeholder-占位文本
      startPlaceholder-范围查询时左侧提示
      rangeSeparator-范围查询时中间提示
      endPlaceholder-范围查询时右侧提示
      format-显示在输入框中的格式
      valueFormat-绑定值的格式
    */
    }, // 条件项配置
    hasSearch: {
      type: Boolean,
      required: false,
      default: true
    }, // 是否存在搜索按钮，默认存在，否则触发条件为搜索组件onChange时触发
    searchBtnTxt: {
      type: String,
      required: false,
      default: '查询'
    }, // 搜索按钮文字
    showLabel: {
      type: Boolean,
      required: false,
      default: true
    }, // 是否显示标签
    hasAddBtn: {
      required: false,
      type: Boolean,
      default: false
    }, // 是否有添加按钮
    addBtnTxt: {
      required: false,
      type: String,
      default: '新增'
    },
    hasBatchDeleteBtn: {
      required: false,
      type: Boolean,
      default: false
    }, // 是否存在批量删除按钮
    hasExportBtn: {
      required: false,
      type: Boolean,
      default: false
    }, // 是否存在批量导出按钮
    exportUrl: {
      required: false,
      type: String,
      default: ''
    }, // 导出接口名称
    exportFileName: {
      required: false,
      type: String,
      default: ''
    }, // 导出文件名称
    size: {
      required: false,
      type: String,
      default: null
    }, // 搜索栏尺寸
    hasBatch: {
      required: false,
      type: Boolean,
      default: false
    }, // 是否有批量操作
    labelWidth: {
      required: false,
      type: [Number, String],
      default: 90
    }, // 标签宽度
    labelPosition: {
      required: false,
      type: String,
      default: 'right'
    }, // 布局方式
    isBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isReady: false,
      searchObj: {},
      loading: false,
      flag: ''
    }
  },
  created() {
    this.resetSearchValue()
    this.isReady = true
  },
  // mounted() {
  //   this.flag = this.isBack
  //   if (this.flag) {
  //     this.conditionList.forEach(item => {
  //       let a = (sessionStorage.getItem(item.value) === 'null' || !sessionStorage.getItem(item.value)) ? '' : sessionStorage.getItem(item.value)
  //       if (item.value === 'status' && a !== '') {
  //         a = Number(a)
  //       }
  //       this.searchObj[item.value] = a
  //     })
  //   }
  // },
  methods: {
    searchData() {
      this.$emit('searchData', this.searchObj, 'maintain')
    },
    getSearchData() {
      return this.searchObj
    },
    // 重置搜索数据
    resetSearchValue() {
      // this.conditionList.forEach(item => {
      //   sessionStorage.removeItem(item.value)
      // })
      this.conditionList.forEach(item => {
        this.$set(this.searchObj, item.value, item.defaultValue)
      })
      this.$nextTick(() => {
        this.$emit('searchData', this.searchObj)
      })
    },
    // 重置方法
    resetMethod() {
      this.resetSearchValue()
    },
    // 批量删除
    batchDelete() {
      this.$emit('batchDelete')
    }
  }
}
</script>
<style lang="scss">
.yitu-search-condition{
  .el-row{
    // height: 59px;
    >div{
      display: inline-block;
      margin-right: 20px;
      margin-bottom: 10px;
      >div{
        display: flex;
        align-items: center;
        >div{
          flex: 1;
        }
      }
    }
    .label{
      margin-right: 10px;
      color: #606266;
    }
  }
  .ml20{
    margin-left: 20px;
  }
  // .el-select{
  //   width: 200px;
  // }
  // .el-input{
  //   width: 200px;
  //   height: 32px;
  //   input{
  //     height: 32px;
  //     box-sizing: border-box;
  //   }
  //   .el-input__suffix{
  //     .el-input__icon{
  //       line-height: 32px;
  //     }
  //   }
  // }
  .el-select__tags+.el-input{
    height: auto;
  }
  .yt-search-btn{
    border-color: #0368d1;
    background-color: #0368d1;
  }
  .reset-btn:focus, .reset-btn:hover{
    border-color: rgba(3, 104, 209,0.2);
    color: #0368d1;
    background-color: rgba(3, 104, 209,0.2);
  }
  // .el-date-editor{
  //   height: 32px;
  //   vertical-align: middle;
  //   .el-input__icon{
  //     height: 32px;
  //     line-height: 32px;
  //   }
  // }
  // .el-date-editor .el-range-separator{
  //   height: 32px;
  // }
}
</style>
